<template>
  <a-button
    shape="circle"
    type="primary"
    title="添加云端设备数据"
    class="fixed flex items-center justify-center w-12 h-12 text-xl cursor-pointer bottom-10 right-12"
    @click="showModal"
  >
    <AppstoreAddOutlined @click="showModal" />
  </a-button>
  <a-modal
    class="add-device-modal"
    title="添加云端设备数据"
    v-model:visible="visible"
    :confirm-loading="confirmLoading"
    width="1000px"
    @ok="handleOk"
  >
    <AddDeviceDataForm ref="form" />
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { AppstoreAddOutlined } from "@ant-design/icons-vue";
import AddDeviceDataForm from "../forms/AddDeviceDataForm.vue";
import message from "ant-design-vue/es/message";

export default defineComponent({
  name: "AddDataModal",
  components: {
    AppstoreAddOutlined,
    AddDeviceDataForm,
  },
  setup() {
    const form = ref();
    const visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const handleOk = async () => {
      confirmLoading.value = true;
      if (await form.value.onSubmit()) {
        visible.value = false;
        message.success("新增设备数据成功");
      }
      confirmLoading.value = false;
    };
    const showModal = () => {
      visible.value = true;
    };
    return { visible, handleOk, showModal, confirmLoading, form };
  },
});
</script>

<style scoped lang="scss"></style>
